<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>对表格进行排序</title>
	</head>
	<body>
		<table id="table">
			<thead>
				<tr>
					<th>Name</th>
					<th>Surname</th>
					<th>Age</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>John</td>
					<td>Smith</td>
					<td>10</td>
				</tr>
				<tr>
					<td>Pete</td>
					<td>Brown</td>
					<td>15</td>
				</tr>
				<tr>
					<td>Ann</td>
					<td>Lee</td>
					<td>5</td>
				</tr>
				<tr>
					<td>...</td>
					<td>...</td>
					<td>...</td>
				</tr>
			</tbody>
		</table>

		<script>
			const table = document.getElementById('table')
			const tbody = table.querySelector('tbody')
			const trs = tbody.querySelectorAll('tr')

			// 使用 append 方法来添加一个已经存在的元素时，浏览器会将该元素从其原始位置移动到新的位置，而不是创建一个新的副本。
			// 因为 tr 元素已经存在于 tbody 中，所以当你使用 append 方法来重新添加它们时，浏览器会将它们从原始位置移动到新的位置，这样就覆盖了之前的内容。
			Array.from(trs)
				.sort((a, b) => a.firstElementChild.innerText.localeCompare(b.firstElementChild.innerText))
				.forEach((tr) => tbody.append(tr))
		</script>
	</body>
</html>
